import React, { useEffect, useState } from 'react';
import { Modal, Form, Space, Row, Col, Button } from 'antd';
import FormCondition from '@/components/FormCondition';
import { connect } from 'umi';
import { notification } from 'antd';
const Invalid = (props) => {
  const { visible = false, onClose, loading, dispatch, handleCallback, } = props;
  const { show = false, detail = {} } = visible;
  const { id, stageInfo = {} } = detail;
  const [data, setData] = useState({})
  const [form] = Form.useForm();
  const [list, setList] = useState([])
  // 确认提交
  useEffect(() => {
    if (show) {
      fetchData()
    }
  }, [show])
  const fetchData = () => {
    dispatch({
      type: 'user/fetchListInvalidReason',
      payload: {
      },
      callback: (e) => {
        // const {
        //   stageIdentification
        // } = stageInfo
        // const { stageItemList = [] } = e
        // console.log(stageIdentification, 'stageIdentification========')
        // setList(stageItemList.reduce((item, val) => {
        //   const { subStageItemList = [] } = val
        //   if (val.stageInfo.stageIdentification === stageIdentification) {
        //     if (subStageItemList.length > 0) {
        //       let newList = []
        //       subStageItemList.forEach(c => {
        //         const { invalidReasonList = [] } = c
        //         newList = [...newList, ...invalidReasonList]
        //       })
        //       console.log(newList, 'newList============')
        //       return newList
        //     }
        //     else {
        //       const { invalidReasonList = [] } = val
        //       return invalidReasonList
        //     }
        //   }
        //   else {
        //     return item
        //   }
        // }, []))
        const { invalidReasonList } = e
        setList(invalidReasonList)
      },
    });
  };
  const handleUpAudit = () => {
    form.validateFields().then((values) => {
      dispatch({
        type: 'user/fakeDisableUserInvalid',
        payload: { userId: id, ...values, stage: stageInfo.stageIdentification },
        callback: () => {
          handleCallback()
          onClose()
        }
      })
    });
  };

  const formItems = [
    {
      label: `无效原因`,
      name: 'invalidReason',
      // type: 'textArea',

      type: 'select',
      style: { textAlign: 'left' },
      select: list,
      fieldNames: { label: 'reason', value: 'id' },
    },
    {
      label: `无效说明`,
      name: 'invalidDesc',
      type: 'textArea'
    },
    // {
    //   type: 'noForm',
    //   formItems: <Row style={{ textAlign: 'left' }}>
    //     <Col offset={6} >
    //       快捷填入关键词:
    //       {list.map((item, index) => {
    //         return (
    //           <Button
    //             style={{ marginLeft: 8 }}
    //             type='link'
    //             key={index}
    //             onClick={() => {
    //               let data = form.getFieldValue('invalidReason') || '';
    //               form.setFieldValue('invalidReason', data + item + ',');
    //             }}
    //           >
    //             {item}
    //           </Button>
    //         );
    //       })}

    //     </Col>
    //   </Row>
    // }
  ];
  const modalProps = {
    width: 650,
    visible: show,
    maskClosable: true,
    title: '无效用户',
    destroyOnClose: true,
    zIndex: 1001,
    confirmLoading: loading,
  };

  return (
    <Modal {...modalProps} onCancel={onClose} onOk={handleUpAudit}>
      <Space direction={'vertical'} style={{ display: 'flex', textAlign: 'center', justifyContent: 'center', width: '100%' }}>
        <FormCondition form={form} formItems={formItems}></FormCondition>
      </Space>
    </Modal >
  );
};

export default connect(({ loading }) => ({
  loading: loading.effects['user/fetchListInvalidReason']
}))(Invalid);
;
